<template>
  <div class="box">
      <div class="top">
        <span @click="fun()" style="font-size:.14rem">💜返回</span>
        <p>活动</p>
        <h1>···</h1>
      </div>
      <div class="active">
        <!-- {{newarr}} -->
        <div v-for="(v,i) in newarr.active" :key="i">
          <img :src="v.imgUrl" alt="" @click="funa()">
          <h1>{{v.title}}</h1>
          <p>{{v.text}}</p>
        </div>
      
      </div>
  </div>
</template>

<script>
export default {
methods: {
  fun(){
    this.$router.push("./index")
  },
  funa(){
    this.$router.push("./zhipian")
  }
},
created() {
    // 1.在页面加载完毕后自动使用生命周期的钩子函数  dispatch
    // 来触发vuex的调用异步操作
    this.$store.dispatch("demoaxiosb");
  },
  // 12.读取state的数据
  computed: {
    newarr(){
      //  console.log(this.$store.state.aboutm.arr.stop)
    return this.$store.state.activem.arr
   
  }
  },
}
</script>

<style scoped>
.box{
  background-color: #f8f4f4;
}
.top{
  display: flex;
  height: .4rem;
  width: 100%;
  background-color: white;
  line-height: .4rem;
  position: relative;
  border-bottom: .005rem solid gray;
  position: fixed;
top: 0;
left: 0;
z-index: 999;

}
.top>span{
color: gray;
font-size: .25rem;
margin-right: .25rem;
}
.top>p{
  font-size: .2rem;
}
.top>h1{
  position: absolute;
  right: .3rem;
}
.active>div{
padding-top:.2rem ;
background-color: #fff;
margin-bottom: .1rem;
}
.active>div>img{
width:93%;
height: 1.745rem;
width:93%;
margin: 0 .1rem;
}
.active>div>h1{
  margin: .1rem 0;
  font-size: .23rem;
 margin-left:.1rem;
}
.active>div>p{
  padding-bottom: .2rem;
  margin-left:.1rem;
}
</style>